<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神鸟意念场</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500&display=swap');
        
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: #0a1a35;
            font-family: 'Noto Sans SC', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #magic-field {
            width: 1440px;
            height: 900px;
            position: relative;
        }
        
        /* 背景层 */
        .background-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: radial-gradient(ellipse at center, #0a1a35 0%, #050e1d 100%);
        }
        
        .energy-matrix {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><path d="M300,50 C450,80 550,150 550,300 C550,450 450,550 300,550 C150,550 50,450 50,300 C50,150 150,80 300,50 Z" fill="none" stroke="%23d4af3722" stroke-width="2"/><path d="M300,100 C400,120 500,180 500,300 C500,420 400,500 300,500 C200,500 100,420 100,300 C100,180 200,120 300,100 Z" fill="none" stroke="%23d4af3711" stroke-width="1"/></svg>');
            background-size: contain;
            background-position: center;
            transform: translate(-50%, -50%);
            animation: rotate 120s linear infinite;
        }
        
        .particle-flow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.25;
            animation: flowAnimation linear infinite;
        }
        
        /* 神鸟容器 */
        .bird-sanctuary {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
            height: 95%;
            z-index: 10;
        }
        
        .bird-platform {
            position: absolute;
            width: 160px;
            height: 160px;
            background: radial-gradient(ellipse at center, rgba(20, 40, 80, 0.5) 0%, rgba(10, 26, 53, 0.2) 70%);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: all;
            transition: all 0.4s ease;
        }
        
        .bird-platform:hover {
            transform: scale(1.05);
        }
        
        .bird-icon {
            width: 100px;
            height: 100px;
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
            transition: all 0.3s ease;
        }
        
        .bird-platform:hover .bird-icon {
            filter: drop-shadow(0 0 15px rgba(255,255,255,0.6));
        }
        
        .bird-name {
            position: absolute;
            bottom: -40px;
            width: 100%;
            text-align: center;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 22px;
            color: rgba(255,255,255,0.8);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .bird-platform:hover .bird-name {
            opacity: 1;
        }
        
        /* 自定义光标 */
        .custom-cursor {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(212, 175, 55, 0.7) 0%, rgba(212, 175, 55, 0) 70%);
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
            pointer-events: none;
            z-index: 100;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease-out;
        }
        
        .cursor-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.6);
            pointer-events: none;
            animation: fadeOut 1s ease-out forwards;
        }
        
        /* 进度条 */
        .progress-ring {
            position: absolute;
            width: 140px;
            height: 140px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .bird-platform:hover .progress-ring {
            opacity: 1;
        }
        
        .progress-circle {
            fill: none;
            stroke: rgba(255,255,255,0.2);
            stroke-width: 2;
        }
        
        .progress-fill {
            fill: none;
            stroke: #d4af37;
            stroke-width: 3;
            stroke-dasharray: 314;
            stroke-dashoffset: 314;
            stroke-linecap: round;
            transform-origin: center;
            transform: rotate(-90deg);
            transition: stroke-dashoffset 2.5s linear;
        }
        
        .bird-platform:hover .progress-fill {
            stroke-dashoffset: 0;
        }
        
        /* 激活状态 */
        .activated {
            animation: birdActivate 0.5s ease-out forwards;
        }
        
        .energy-beam {
            position: absolute;
            height: 4px;
            background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(212,175,55,0));
            transform-origin: left center;
            pointer-events: none;
            opacity: 0;
            z-index: 5;
        }
        
        .energy-beam.active {
            opacity: 1;
        }
        
        .hologram {
            position: absolute;
            width: 280px;
            padding: 25px;
            background: rgba(10, 26, 53, 0.85);
            border: 1px solid rgba(212, 175, 55, 0.4);
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
            backdrop-filter: blur(5px);
            opacity: 0;
            pointer-events: none;
            transform: translateY(20px);
            transition: all 0.4s ease;
            z-index: 100;
        }
        
        .hologram.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hologram-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 26px;
            text-align: center;
            margin-bottom: 15px;
            color: #d4af37;
        }
        
        .hologram-content {
            font-size: 14px;
            line-height: 1.5;
            color: rgba(255,255,255,0.8);
        }
        
        /* 返回按钮 */
        .portal-button {
            position: absolute;
            top: 30px;
            left: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(10, 26, 53, 0.5);
            backdrop-filter: blur(3px);
            border: 1px solid rgba(212, 175, 55, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 200;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .portal-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
        }
        
        .portal-button:hover::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: conic-gradient(transparent, rgba(212, 175, 55, 0.4), transparent);
            animation: portalRing 2s linear infinite;
        }
        
        .portal-icon {
            position: relative;
            z-index: 2;
            font-size: 30px;
            color: #d4af37;
        }
        
        /* 引导文案 */
        .guide-text {
            position: absolute;
            bottom: 40px;
            width: 100%;
            text-align: center;
            font-size: 20px;
            color: rgba(255,255,255,0.7);
            letter-spacing: 2px;
            z-index: 50;
            opacity: 0.8;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }
        
        /* 粒子爆发效果 */
        .particle-burst {
            position: absolute;
            pointer-events: none;
            z-index: 20;
        }
        
        .burst-particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
            animation: burstAnimation 1.5s ease-out forwards;
        }
        
        /* 全局进度条 */
        .global-progress {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
            width: 400px;
            height: 10px;
            background: rgba(20, 40, 80, 0.5);
            border-radius: 10px;
            overflow: hidden;
            z-index: 100;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }
        
        .progress-node {
            width: 60px;
            height: 100%;
            margin: 0 5px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            position: relative;
            transition: all 0.5s ease;
        }
        
        .progress-node.active {
            background: rgba(212, 175, 55, 0.7);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
        }
        
        /* 激活特效 */
        .activation-effects {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .shatter-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        
        .shatter-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0;
            animation: shatterAnimation 1.2s ease-out forwards;
        }
        
        .light-wave {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
            transform: scale(0);
            opacity: 0;
            animation: waveAnimation 1s ease-out forwards;
            z-index: 5;
        }
        
        .particle-emitter {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .emitter-particle {
            position: absolute;
            width: 4px;
            height: 8px;
            border-radius: 40%;
            background: currentColor;
            opacity: 0.8;
        }
        
        .totem-mark {
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%) scale(0);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(20, 40, 80, 0.7);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
            opacity: 0;
            transition: all 0.5s ease;
            z-index: 15;
        }
        
        .totem-mark::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 85%;
            height: 85%;
            border-radius: 50%;
            border: 2px solid currentColor;
            box-sizing: border-box;
        }
        
        .totem-mark::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40%;
            height: 40%;
            background: currentColor;
            border-radius: 50%;
            box-shadow: 0 0 10px currentColor;
        }
        
        .totem-mark.active {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
        
        /* 终极奖励核心 */
        .ultimate-core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
            z-index: 150;
            transition: all 1s ease;
        }
        
        .ultimate-core.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            animation: pulseCore 4s ease-in-out infinite;
        }
        
        .core-inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #d4af37 40%, #0a1a35 100%);
            box-shadow: 0 0 40px rgba(212, 175, 55, 0.8);
            animation: rotateCore 10s linear infinite;
        }
        
        .core-rays {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotateRays 20s linear infinite;
        }
        
        .energy-ray {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 3px;
            background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(212,175,55,0.4));
            transform-origin: left center;
        }
        
        .core-message {
            position: absolute;
            bottom: -50px;
            width: 100%;
            text-align: center;
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 32px;
            color: #d4af37;
            opacity: 0;
            transform: translateY(20px);
            transition: all 1s ease 1s;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
        }
        
        .ultimate-core.active .core-message {
            opacity: 1;
            transform: translateY(0);
        }
        
        @keyframes pulseCore {
            0% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }
            50% { box-shadow: 0 0 80px rgba(212, 175, 55, 0.8); }
            100% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.5); }
        }
        
        @keyframes rotateCore {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @keyframes rotateRays {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes shatterAnimation {
            0% { transform: translate(0,0) scale(1); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
        }
        
        @keyframes waveAnimation {
            0% { transform: scale(0.5); opacity: 0.9; }
            100% { transform: scale(3); opacity: 0; }
        }
        
        /* 动画定义 */
        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        @keyframes flowAnimation {
            0% { transform: translateY(-20px); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(920px); opacity: 0; }
        }
        
        @keyframes fadeOut {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(2); }
        }
        
        @keyframes portalRing {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes birdActivate {
            0% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.2); filter: brightness(2); }
            100% { transform: scale(1); filter: brightness(1.5); }
        }
        
        @keyframes burstAnimation {
            0% { opacity: 1; transform: translate(0,0) scale(0); }
            50% { opacity: 0.8; transform: translate(var(--tx), var(--ty)) scale(1); }
            100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
        }
    </style>
</head>
<body>
    <div id="magic-field">
        <!-- 背景层 -->
        <div class="background-layer">
            <div class="energy-matrix"></div>
            <div class="particle-flow" id="particle-flow"></div>
        </div>
        
        <!-- 粒子爆发层 -->
        <div id="particle-burst-layer"></div>
        
        <!-- 神鸟意念场 -->
        <div class="bird-sanctuary">
            <!-- 全局进度条 -->
            <div class="global-progress">
                <div class="progress-node" data-bird="1"></div>
                <div class="progress-node" data-bird="2"></div>
                <div class="progress-node" data-bird="3"></div>
                <div class="progress-node" data-bird="4"></div>
                <div class="progress-node" data-bird="5"></div>
            </div>
            
            <!-- 终极奖励核心 -->
            <div class="ultimate-core" id="ultimate-core">
                <div class="core-inner"></div>
                <div class="core-rays"></div>
                <div class="core-message">五行之力，归于一体</div>
            </div>
            <!-- 鹪明白 -->
            <div class="bird-platform" id="bird1" style="top: 20%; left: 25%;">
                <svg class="bird-icon" viewBox="0 0 100 100">
                    <path d="M50,20 C60,10 80,15 85,30 C90,45 75,60 60,65 C45,70 30,65 25,55 C20,45 40,30 50,20 Z" fill="none" stroke="#f0f0f0" stroke-width="3"></path>
                </svg>
                <div class="bird-name">鹪明白</div>
                <svg class="progress-ring">
                    <circle class="progress-circle" cx="70" cy="70" r="50"></circle>
                    <circle class="progress-fill" cx="70" cy="70" r="50"></circle>
                </svg>
                <div class="hologram" id="hologram1">
                    <div class="hologram-title">鹪明白</div>
                    <div class="hologram-content">
                        象征纯洁与智慧，掌管光明与希望。相传能在黑暗中指引方向，带来智慧和启迪。
                    </div>
                </div>
            </div>
            
            <!-- 幽昌紫 -->
            <div class="bird-platform" id="bird2" style="top: 65%; left: 15%;">
                <svg class="bird-icon" viewBox="0 0 100 100">
                    <path d="M30,30 C20,40 25,60 40,70 C55,80 70,65 75,50 C80,35 65,20 50,20 C35,20 40,20 30,30 Z" fill="none" stroke="#9b59b6" stroke-width="3"></path>
                </svg>
                <div class="bird-name">幽昌紫</div>
                <svg class="progress-ring">
                    <circle class="progress-circle" cx="70" cy="70" r="50"></circle>
                    <circle class="progress-fill" cx="70" cy="70" r="50"></circle>
                </svg>
                <div class="hologram" id="hologram2">
                    <div class="hologram-title">幽昌紫</div>
                    <div class="hologram-content">
                        象征神秘与深邃，掌管梦境与预言。据说能穿越梦境与现实，揭示未来的秘密。
                    </div>
                </div>
            </div>
            
            <!-- 发明金 -->
            <div class="bird-platform" id="bird3" style="top: 75%; left: 70%;">
                <svg class="bird-icon" viewBox="0 0 100 100">
                    <path d="M40,30 C25,40 30,60 45,70 C60,80 75,65 80,50 C85,35 70,20 55,20 C40,20 55,20 40,30 Z" fill="none" stroke="#d4af37" stroke-width="3"></path>
                </svg>
                <div class="bird-name">发明金</div>
                <svg class="progress-ring">
                    <circle class="progress-circle" cx="70" cy="70" r="50"></circle>
                    <circle class="progress-fill" cx="70" cy="70" r="50"></circle>
                </svg>
                <div class="hologram" id="hologram3">
                    <div class="hologram-title">发明金</div>
                    <div class="hologram-content">
                        象征创造与技艺，掌管发明与工艺。传说中为人类带来智慧和创造力之源。
                    </div>
                </div>
            </div>
            
            <!-- 鹔鹴青 -->
            <div class="bird-platform" id="bird4" style="top: 30%; left: 75%;">
                <svg class="bird-icon" viewBox="0 0 100 100">
                    <path d="M60,20 C75,30 70,50 55,60 C40,70 25,55 20,40 C15,25 30,10 45,10 C60,10 45,10 60,20 Z" fill="none" stroke="#1abc9c" stroke-width="3"></path>
                </svg>
                <div class="bird-name">鹔鹴青</div>
                <svg class="progress-ring">
                    <circle class="progress-circle" cx="70" cy="70" r="50"></circle>
                    <circle class="progress-fill" cx="70" cy="70" r="50"></circle>
                </svg>
                <div class="hologram" id="hologram4">
                    <div class="hologram-title">鹔鹴青</div>
                    <div class="hologram-content">
                        象征自由与灵动，掌管风与诗歌。翱翔于天际，为诗人带来灵感之风。
                    </div>
                </div>
            </div>
            
            <!-- 凤凰彩 -->
            <div class="bird-platform" id="bird5" style="top: 50%; left: 50%;">
                <svg class="bird-icon" viewBox="0 0 100 100">
                    <path d="M50,10 C65,20 80,30 85,50 C90,70 75,85 60,85 C45,85 30,70 25,50 C20,30 35,20 50,10 Z" fill="none" stroke="url(#phoenix-gradient)" stroke-width="4"></path>
                    <defs>
                        <linearGradient id="phoenix-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#ffd700"></stop>
                            <stop offset="100%" stop-color="#ff4500"></stop>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="bird-name">凤凰彩</div>
                <svg class="progress-ring">
                    <circle class="progress-circle" cx="70" cy="70" r="50"></circle>
                    <circle class="progress-fill" cx="70" cy="70" r="50"></circle>
                </svg>
                <div class="hologram" id="hologram5">
                    <div class="hologram-title">凤凰彩</div>
                    <div class="hologram-content">
                        象征重生与永恒，掌管生命与轮回。在烈火中涅槃重生，代表生命的循环与不朽。
                    </div>
                </div>
            </div>
            
            <!-- 光束连接 -->
            <div class="energy-beam" id="beam1"></div>
            <div class="energy-beam" id="beam2"></div>
            <div class="energy-beam" id="beam3"></div>
            <div class="energy-beam" id="beam4"></div>
            <div class="energy-beam" id="beam5"></div>
        </div>
        
        <!-- 自定义光标 -->
        <div class="custom-cursor"></div>
        
        <!-- 返回按钮 -->
        <a href="科技神韻界面.html"> <!-- 修改这里的跳转目标 -->
            <div class="portal-button">
                <iconify-icon icon="mdir:arrow-left" class="portal-icon"></iconify-icon>
            </div>
        </a >
        
        <!-- 引导文案 -->
        <div class="guide-text">靠近并专注，即可链接</div>
    </div>

    <script>
        // 创建背景粒子流
        function createParticleFlow() {
            const flowContainer = document.getElementById('particle-flow');
            const colors = ['#d4af37', '#9b59b6', '#1abc9c', '#ffd700', '#f0f0f0'];
            
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // 随机属性
                const size = Math.random() * 4 + 1;
                const posX = Math.random() * 1440;
                const duration = Math.random() * 15 + 10;
                const color = colors[Math.floor(Math.random() * colors.length)];
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}px`;
                particle.style.background = color;
                particle.style.animationDuration = `${duration}s`;
                particle.style.animationDelay = `${Math.random() * 5}s`;
                
                flowContainer.appendChild(particle);
            }
        }
        
        // 鼠标拖尾特效（全局）
        function setupCursor() {
            const cursor = document.querySelector('.custom-cursor');
            document.addEventListener('mousemove', (e) => {
                cursor.style.left = `${e.clientX}px`;
                cursor.style.top = `${e.clientY}px`;
                cursor.style.transform = 'translate(-50%,-50%)';
                // 金色拖尾粒子
                const tail = document.createElement('div');
                tail.style.position = 'fixed';
                tail.style.left = `${e.clientX-6}px`;
                tail.style.top = `${e.clientY-6}px`;
                tail.style.width = tail.style.height = Math.random()*10+8+'px';
                tail.style.borderRadius = '50%';
                tail.style.background = 'radial-gradient(circle,#ffd700 0%,rgba(212,175,55,0.2) 80%)';
                tail.style.opacity = Math.random()*0.5+0.5;
                tail.style.pointerEvents = 'none';
                tail.style.zIndex = '999';
                tail.style.transition = 'opacity 0.8s linear';
                document.body.appendChild(tail);
                setTimeout(()=>{tail.style.opacity='0';},30);
                setTimeout(()=>{tail.remove();},800);
            });
        }
        
        // 全局进度状态
        const globalState = {
            activatedBirds: [false, false, false, false, false],
            totalActivated: 0
        };
        
        // 神鸟悬停交互
        function setupBirdInteractions() {
            const birds = document.querySelectorAll('.bird-platform');
            const progressNodes = document.querySelectorAll('.progress-node');
            let finishedCount = 0;
            birds.forEach((bird, index) => {
                let hoverTimer;
                let activated = false;
                bird.addEventListener('mouseenter', () => {
                    hoverTimer = setTimeout(() => {
                        if (!bird.classList.contains('activated')) {
                            bird.classList.add('activated');
                            progressNodes[index].classList.add('active');
                            finishedCount++;
                            if (finishedCount === 5) {
                                mergeBirdsToCenter();
                            }
                        }
                    }, 1500);
                });
                bird.addEventListener('mouseleave', () => {
                    clearTimeout(hoverTimer);
                });
            });
        }
        // 神鸟汇聚，形成大光球，散发二进制特效和动态粒子
        function mergeBirdsToCenter() {
            const birds = document.querySelectorAll('.bird-platform');
            const sanctuary = document.querySelector('.bird-sanctuary');
            birds.forEach(bird => {
                bird.style.transition = 'all 1.2s cubic-bezier(.7,.2,.3,1)';
                bird.style.top = '50%';
                bird.style.left = '50%';
                bird.style.transform = 'translate(-50%,-50%) scale(0.3)';
                setTimeout(()=>{ bird.style.opacity = '0'; }, 1200);
            });
            setTimeout(()=>{
                // 大光球呼吸灯效果
                const bigBall = document.createElement('div');
                bigBall.style.position = 'absolute';
                bigBall.style.left = '50%';
                bigBall.style.top = '50%';
                bigBall.style.transform = 'translate(-50%,-50%)';
                bigBall.style.width = '320px';
                bigBall.style.height = '320px';
                bigBall.style.borderRadius = '50%';
                bigBall.style.background = 'radial-gradient(circle,#fff 0%,#d4af37 60%,#0a1a35 100%)';
                bigBall.style.boxShadow = '0 0 120px 60px #d4af37,0 0 240px 120px #fff';
                bigBall.style.zIndex = '300';
                bigBall.style.animation = 'breathGlow 2.2s infinite alternate';
                sanctuary.appendChild(bigBall);
                // 动态小粒子环绕
                function emitBallParticles() {
                    for(let i=0;i<12;i++){
                        const p = document.createElement('div');
                        p.style.position = 'absolute';
                        p.style.left = '50%';
                        p.style.top = '50%';
                        p.style.width = p.style.height = Math.random()*12+8+'px';
                        p.style.borderRadius = '50%';
                        p.style.background = 'radial-gradient(circle,#ffd700 0%,#fff 80%)';
                        p.style.opacity = Math.random()*0.5+0.5;
                        p.style.zIndex = '320';
                        p.style.pointerEvents = 'none';
                        sanctuary.appendChild(p);
                        const angle = Math.random()*2*Math.PI;
                        const radius = 160+Math.random()*60;
                        let t = 0;
                        function animate(){
                            t+=1;
                            p.style.left = (50 + Math.cos(angle)*radius*(t/30))+'%';
                            p.style.top = (50 + Math.sin(angle)*radius*(t/30))+'%';
                            p.style.opacity = Math.max(0,0.7-t/30);
                            if(t<30){
                                requestAnimationFrame(animate);
                            }else{
                                p.remove();
                            }
                        }
                        animate();
                    }
                }
                setInterval(emitBallParticles, 350);
                // 二进制数码特效
                for(let i=0;i<80;i++){
                    const digit = document.createElement('div');
                    digit.textContent = Math.random()>0.5?'0':'1';
                    digit.style.position = 'absolute';
                    digit.style.color = i%2===0?'#d4af37':'#fff';
                    digit.style.fontSize = Math.random()*22+18+'px';
                    digit.style.opacity = Math.random()*0.5+0.4;
                    digit.style.left = (50+Math.cos(i/80*2*Math.PI)*180+Math.random()*40)+'%';
                    digit.style.top = (50+Math.sin(i/80*2*Math.PI)*180+Math.random()*40)+'%';
                    digit.style.fontFamily = 'monospace';
                    digit.style.zIndex = '350';
                    digit.style.pointerEvents = 'none';
                    sanctuary.appendChild(digit);
                    setTimeout(()=>{digit.style.opacity='0';},1800+Math.random()*1200);
                }
            },1400);
        }
        // 呼吸灯动画
        const style = document.createElement('style');
        style.innerHTML = `@keyframes breathGlow {0%{box-shadow:0 0 120px 60px #d4af37,0 0 240px 120px #fff;}100%{box-shadow:0 0 220px 120px #ffd700,0 0 320px 180px #fff;}}`;
        document.head.appendChild(style);
        
        // 创建模型破碎特效
        function createShatterEffect(bird, color) {
            const shatterContainer = bird.querySelector('.shatter-particles');
            const birdIcon = bird.querySelector('.bird-icon path');
            const birdIconBox = birdIcon.getBBox();
            
            shatterContainer.style.color = color;
            
            // 根据SVG路径创建破碎粒子
            for (let i = 0; i < 50; i++) {
                const particle = document.createElement('div');
                particle.classList.add('shatter-particle');
                
                // 从SVG路径周围生成粒子
                const posX = birdIconBox.x + Math.random() * birdIconBox.width;
                const posY = birdIconBox.y + Math.random() * birdIconBox.height;
                
                particle.style.left = `${posX}px`;
                particle.style.top = `${posY}px`;
                
                // 随机移动方向
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 100 + 20;
                const tx = Math.cos(angle) * distance;
                const ty = Math.sin(angle) * distance;
                
                particle.style.setProperty('--tx', `${tx}px`);
                particle.style.setProperty('--ty', `${ty}px`);
                
                shatterContainer.appendChild(particle);
                
                // 粒子清理
                setTimeout(() => {
                    particle.remove();
                }, 1200);
            }
            
            // 短暂隐藏原始SVG，然后淡入
            birdIcon.style.opacity = '0';
            setTimeout(() => {
                birdIcon.style.opacity = '1';
                birdIcon.style.transition = 'opacity 0.5s ease';
            }, 300);
        }
        
        // 触发光波效果
        function triggerLightWave(bird) {
            const lightWave = bird.querySelector('.light-wave');
            lightWave.style.animation = 'none';
            
            // 触发重排以重置动画
            void lightWave.offsetWidth;
            
            lightWave.style.animation = 'waveAnimation 1s ease-out forwards';
        }
        
        // 开始粒子发射器
        function startParticleEmitter(bird, color) {
            const emitter = bird.querySelector('.particle-emitter');
            emitter.style.color = color;
        }
        
        // 发射粒子
        function emitParticle(bird, color) {
            const emitter = bird.querySelector('.particle-emitter');
            const particle = document.createElement('div');
            particle.classList.add('emitter-particle');
            
            // 从神鸟中心发射
            const centerX = emitter.offsetWidth / 2;
            const centerY = emitter.offsetHeight / 2;
            
            particle.style.left = `${centerX}px`;
            particle.style.top = `${centerY}px`;
            
            // 随机方向
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 3 + 2;
            const lifespan = Math.random() * 1000 + 500;
            
            // 添加到DOM
            emitter.appendChild(particle);
            
            // 动画
            let elapsed = 0;
            const startTime = performance.now();
            
            function animateParticle(timestamp) {
                elapsed = timestamp - startTime;
                
                const progress = Math.min(elapsed / lifespan, 1);
                const distance = speed * elapsed / 16; // 16ms约等于60fps
                
                const x = centerX + Math.cos(angle) * distance;
                const y = centerY + Math.sin(angle) * distance;
                
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                particle.style.opacity = 1 - progress;
                
                if (progress < 1) {
                    requestAnimationFrame(animateParticle);
                } else {
                    particle.remove();
                }
            }
            
            requestAnimationFrame(animateParticle);
        }
        
        // 更新全局进度
        function updateGlobalProgress(index) {
            const progressNodes = document.querySelectorAll('.progress-node');
            
            // 激活对应的进度节点
            progressNodes[index].classList.add('active');
            
            // 检查是否全部激活
            if (globalState.totalActivated === 5) {
                setTimeout(() => {
                    triggerUltimateReward();
                }, 1000);
            }
        }
        
        // 触发终极奖励
        function triggerUltimateReward() {
            const ultimateCore = document.getElementById('ultimate-core');
            const birds = document.querySelectorAll('.bird-platform');
            
            // 激活能量核心
            ultimateCore.classList.add('active');
            
            // 创建从每个图腾到中心的光线
            birds.forEach((bird, index) => {
                const totemMark = bird.querySelector('.totem-mark');
                const totemRect = totemMark.getBoundingClientRect();
                const coreRect = ultimateCore.getBoundingClientRect();
                
                const ray = document.createElement('div');
                ray.classList.add('energy-ray');
                
                // 计算光线位置和角度
                const dx = coreRect.left + coreRect.width/2 - (totemRect.left + totemRect.width/2);
                const dy = coreRect.top + coreRect.height/2 - (totemRect.top + totemRect.height/2);
                const distance = Math.sqrt(dx * dx + dy * dy);
                const angle = Math.atan2(dy, dx) * 180 / Math.PI;
                
                ray.style.width = `${distance}px`;
                ray.style.left = `${totemRect.left + totemRect.width/2 - ultimateCore.offsetLeft}px`;
                ray.style.top = `${totemRect.top + totemRect.height/2 - ultimateCore.offsetTop}px`;
                ray.style.transform = `rotate(${angle}deg)`;
                ray.style.background = `linear-gradient(90deg, ${bird.dataset.color || bird.dataset.altColor || '#ffffff'}, rgba(255,255,255,0.6))`;
                
                ultimateCore.appendChild(ray);
                
                // 光线动画
                ray.style.opacity = '0';
                setTimeout(() => {
                    ray.style.opacity = '1';
                    ray.style.transition = 'opacity 0.8s ease';
                }, index * 300);
            });
            
            // 创建旋转光芒
            for (let i = 0; i < 12; i++) {
                const ray = document.createElement('div');
                ray.classList.add('energy-ray');
                
                const angle = (i / 12) * 360;
                ray.style.width = '300px';
                ray.style.transform = `rotate(${angle}deg)`;
                ray.style.background = `linear-gradient(90deg, rgba(255,255,255,0.8), rgba(212,175,55,0))`;
                
                ultimateCore.querySelector('.core-rays').appendChild(ray);
            }
            
            // 庆祝动画：全屏闪光
            const flash = document.createElement('div');
            flash.style.position = 'absolute';
            flash.style.top = '0';
            flash.style.left = '0';
            flash.style.width = '100%';
            flash.style.height = '100%';
            flash.style.background = 'rgba(255,255,255,0)';
            flash.style.zIndex = '200';
            flash.style.pointerEvents = 'none';
            document.body.appendChild(flash);
            
            setTimeout(() => {
                flash.style.background = 'rgba(255,255,255,0.8)';
                flash.style.transition = 'background 0.5s ease';
                
                setTimeout(() => {
                    flash.style.background = 'rgba(255,255,255,0)';
                    
                    setTimeout(() => {
                        flash.remove();
                    }, 500);
                }, 500);
            }, 500);
        }
        
        // 更新光束位置
        function updateBeamPosition(beam, bird, cursor) {
            const birdRect = bird.getBoundingClientRect();
            const cursorRect = cursor.getBoundingClientRect();
            
            const birdX = birdRect.left + birdRect.width/2;
            const birdY = birdRect.top + birdRect.height/2;
            const cursorX = cursorRect.left + cursorRect.width/2;
            const cursorY = cursorRect.top + cursorRect.height/2;
            
            // 计算距离和角度
            const dx = birdX - cursorX;
            const dy = birdY - cursorY;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
            
            // 更新光束样式
            beam.style.width = `${distance}px`;
            beam.style.left = `${cursorX}px`;
            beam.style.top = `${cursorY}px`;
            beam.style.transform = `rotate(${angle}deg)`;
        }
        
        // 粒子爆发效果
        function createParticleBurst(bird, birdIndex) {
            const burstContainer = document.getElementById('particle-burst-layer');
            const birdRect = bird.getBoundingClientRect();
            const colors = ['#f0f0f0', '#9b59b6', '#d4af37', '#1abc9c', '#ffd700'];
            const burstColor = colors[birdIndex];
            
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.classList.add('burst-particle');
                
                // 大小和位置
                const size = Math.random() * 10 + 5;
                const centerX = birdRect.left + birdRect.width/2;
                const centerY = birdRect.top + birdRect.height/2;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${centerX}px`;
                particle.style.top = `${centerY}px`;
                particle.style.background = burstColor;
                
                // 随机移动方向
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * 150 + 50;
                const tx = Math.cos(angle) * distance;
                const ty = Math.sin(angle) * distance;
                
                particle.style.setProperty('--tx', `${tx}px`);
                particle.style.setProperty('--ty', `${ty}px`);
                
                burstContainer.appendChild(particle);
                
                // 粒子清理
                setTimeout(() => {
                    particle.remove();
                }, 1500);
            }
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticleFlow();
            setupCursor();
            setupBirdInteractions();
            
            // 返回按钮功能
            document.querySelector('.portal-button').addEventListener('click', () => {
                alert('返回科技互动界面');
            });
        });
    </script>

</body></html>